<template>
	<div>
		<div class="pl-6 pr-6 pt-6">
			<el-card class="!border-none pt-4" shadow="never">
				<el-form class="ls-form el-set-form" :model="formData" inline>
					<el-form-item label="Part Number">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.Number" clearable />
					</el-form-item>
					<el-form-item label="机型">
						<el-select class="w-[280px]" v-model="formData.type" placeholder="请选择">
							<el-option v-for="(item, index) in visitType" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button class="main-color1 w-[76px]" >重置</el-button>
						<el-button class="w-[76px]" type="primary" color="#0054A6">查询</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<div class="mt-[30px] p-6">
			<el-card class="p-4">
				<div class="main-color font-bold text-2xl">
					查询结果
				</div>
				<div class="mt-[30px] main-color l-80">
					<el-row style="margin-bottom: 0;">
						<el-col :span="3">
							<div
								class="bg-[#F8F8F8] text-center font-bold rounded-none border-2 border-solid border-color-eee">
								Crusher Model:
							</div>
						</el-col>
						<el-col :span="3">
							<div class="rounded-none border-y-2 border-solid border-color-eee pl-4">
								H2800
							</div>
						</el-col>
						<el-col :span="3">
							<div
								class="bg-[#F8F8F8] text-center font-bold rounded-none border-2 border-solid border-color-eee">
								Part Number:
							</div>
						</el-col>
						<el-col :span="3">
							<div class="rounded-none border-y-2 border-solid border-color-eee pl-4">
								H2800
							</div>
						</el-col>
						<el-col :span="3">
							<div
								class="bg-[#F8F8F8] text-center font-bold rounded-none border-2 border-solid border-color-eee">
								Drawing No:
							</div>
						</el-col>
						<el-col :span="3">
							<div class="rounded-none border-y-2 border-r-2 border-solid border-color-eee pl-4">
								H2800
							</div>
						</el-col>
					</el-row>
					<el-row style="margin-bottom: 0;">
						<el-col :span="3">
							<div
								class="bg-[#F8F8F8] text-center font-bold rounded-none border-l-2 border-r-2 border-b-2 border-solid border-color-eee">
								Part Name:
							</div>
						</el-col>
						<el-col :span="3">
							<div class="rounded-none border-r-2 border-b-2 border-solid border-color-eee pl-4">
								H2800
							</div>
						</el-col>
						<el-col :span="3">
							<div
								class="bg-[#F8F8F8] text-center font-bold rounded-none border-r-2 border-b-2 border-solid border-color-eee">
								Chamber:
							</div>
						</el-col>
						<el-col :span="3">
							<div class="rounded-none border-r-2 border-b-2 border-solid border-color-eee pl-4">
								H2800
							</div>
						</el-col>
						<el-col :span="3">
							<div
								class="bg-[#F8F8F8] text-center font-bold rounded-none border-r-2 border-b-2 border-solid border-color-eee">
								Material:
							</div>
						</el-col>
						<el-col :span="3">
							<div class="rounded-none border-b-2 border-r-2 border-solid border-color-eee pl-4">
								H2800
							</div>
						</el-col>
					</el-row>
					<el-row style="margin-bottom: 0;">
						<el-col :span="3">
							<div
								class="bg-[#F8F8F8] text-center font-bold rounded-none border-l-2 border-b-2 border-r-2 border-solid border-color-eee">
								Unit Weight(kg):
							</div>
						</el-col>
						<el-col :span="3">
							<div class="rounded-none border-b-2 border-r-2 border-solid border-color-eee pl-4">
								H2800
							</div>
						</el-col>
					</el-row>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts" setup>
	const formData = reactive({
		Number: '',
		type: '',
	})
	// 产品分类
	const visitType = ref<Array<any>>([
		{
			label: '反击破配件',
			value: '1'
		},
		{
			label: '鄂破配件',
			value: '2'
		},
	])
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.l-80 {
		line-height: 80px;
	}

	.border-color-eee {
		border-color: #EEEEEE;
	}
</style>